<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div>
        <div v-for="(item,index) in list" :key="index" class="block" style="margin-top: 12px;">
          <div class="getCouponItme">
            <div
              class="image"
              :style="{backgroundImage:`url(${require('../../../assets/img/discount.png')})`}"
            >
              <div class="money">￥{{item.reduce_amount}}</div>
              <div class="desc" v-if="item.coupon_type === CouponType.TFullReduction.value">
                满{{item.full_amount}}减{{item.reduce_amount}}
              </div>
              <div class="desc" v-if="item.coupon_type === CouponType.TEveryFullReduction.value">
                每满{{item.full_amount}}减{{item.reduce_amount}}
              </div>
            </div>
            <div class="content">
              <div class="dist">
                <div class="title">{{item.coupon_title}}</div>
                <div class="time">{{item.coupon_starttime}}-{{item.coupon_endtime}}</div>
                <!-- <div class="time">{{item.start_time}}-{{item.end_time}}</div> -->
              </div>
              <div class="button" v-if="item.coupon_state === 0" @click="onGain(item)">领取</div>
              <div class="button" v-if="item.coupon_state === 1">已领取</div>
              <div class="button" v-if="item.coupon_state === -1">已领完</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Mall from '@/dll/mall'
  import ENUM from '../../../config/enum'

  export default {
    name: 'mallGetcoupon',
    data () {
      return {
        xheader: {
          title: '领券'
        },
        list: [],
        CouponType: ENUM.CouponType
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getList()
      },
      async getList () {
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getNewcouponList()
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (!res.data.coupon_list.length) {
            this.$vux.confirm.show({
              title: '提示',
              content: '暂无可领取优惠券，请稍后再来。',
              showCancelButton: false,
              onConfirm: () => {
                this.$router.back()
              }
            })
            return
          }
          this.list = res.data.coupon_list
        } else {
          this.$vux.confirm.show({
            title: '提示',
            content: res.msg,
            showCancelButton: false,
            onConfirm: () => {
              this.$router.back()
            }
          })
        }
      },
      async onGain (item) {
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Mall.getNewcoupon({ coupon_id: item.coupon_id })
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '领取成功'
          })
          this.getList()
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .getCouponItme {
    display: flex;
    flex-direction: row;
  }

  .getCouponItme .image {
    height: 88px;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url("../../../assets/img/discount.png");
  }

  .getCouponItme .image .money {
    font-size: 32px;
    color: #fff;
    line-height: 45px;
  }

  .getCouponItme .image .desc {
    font-size: 12px;
    color: #fff;
    line-height: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .getCouponItme .content {
    padding: 16px 16px 16px 24px;
    background-color: #fff;
    flex: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .getCouponItme .content .dist {
    flex: 1;
    overflow: hidden;
  }

  .getCouponItme .content .dist .title {
    display: block;
    width: 100%;
    font-size: 18px;
    color: #351009;
    line-height: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .getCouponItme .content .dist .time {
    font-size: 12px;
    color: #a4928f;
    line-height: 17px;
    margin-top: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .getCouponItme .content .button {
    background-image: linear-gradient(135deg, #ff9d9d 0%, #c62c12 100%);
    text-align: center;
    border-radius: 12px;
    min-width: 50px;
    height: 24px;
    width: 50px;
    font-size: 12px;
    color: #fff;
    line-height: 24px;
    margin-left: 16px;
  }
</style>
